<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知问社区 - 专业问答平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
        }
        .editor-toolbar {
            border: 1px solid #e2e8f0;
            border-radius: 0.375rem 0.375rem 0 0;
            background-color: #f8fafc;
        }
        .editor-content {
            border: 1px solid #e2e8f0;
            border-top: none;
            border-radius: 0 0 0.375rem 0.375rem;
            min-height: 200px;
            padding: 1rem;
        }
        .answer-card {
            transition: all 0.2s ease;
        }
        .answer-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .best-answer {
            border-left: 4px solid #10b981;
            background-color: #ecfdf5;
        }
        .tag {
            transition: all 0.2s ease;
        }
        .tag:hover {
            background-color: #3b82f6;
            color: white;
        }
        .vote-btn:hover {
            background-color: #f1f5f9;
        }
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: #3b82f6;
            transition: width 0.3s;
        }
        .nav-link:hover::after {
            width: 100%;
        }
        .active-nav::after {
            width: 100%;
        }
        .badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
        .expert-badge {
            background-color: #f59e0b;
            color: white;
        }
        .verified-badge {
            background-color: #10b981;
            color: white;
        }
        .page {
            display: none;
        }
        .active-page {
            display: block;
        }
        .skeleton {
            animation: skeleton-loading 1s linear infinite alternate;
        }
        @keyframes skeleton-loading {
            0% {
                background-color: hsl(200, 20%, 80%);
            }
            100% {
                background-color: hsl(200, 20%, 95%);
            }
        }
        .tab-button {
            position: relative;
            padding-bottom: 0.5rem;
        }
        .tab-button.active-tab::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #3b82f6;
        }
        .category-card {
            transition: all 0.2s ease;
        }
        .category-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .progress-bar {
            height: 6px;
            border-radius: 3px;
            background-color: #e5e7eb;
        }
        .progress-fill {
            height: 100%;
            border-radius: 3px;
            background-color: #3b82f6;
        }
        .notification-item.unread {
            background-color: #f0f7ff;
        }
        .search-btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .creative-card {
            transition: all 0.2s ease;
            border: 1px solid #e5e7eb;
        }
        .creative-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .follow-btn {
            transition: all 0.2s ease;
        }
        .follow-btn:hover {
            background-color: #1d4ed8;
        }
        .bookmarked {
            color: #f59e0b;
        }
        .liked {
            color: #ef4444;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- Header -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center cursor-pointer" onclick="navigateTo('home')">
                    <i class="fas fa-question-circle text-white text-xl"></i>
                </div>
                <h1 class="text-xl font-bold text-gray-800 cursor-pointer" onclick="navigateTo('home')">知问社区</h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="nav-link active-nav text-blue-600 font-medium" onclick="navigateTo('home')">首页</a>
                <a href="#" class="nav-link text-gray-600 hover:text-blue-600 font-medium" onclick="navigateTo('waiting-answer')">等你来答</a>
                <a href="#" class="nav-link text-gray-600 hover:text-blue-600 font-medium" onclick="navigateTo('categories')">分类</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative hidden md:flex">
                    <input type="text" placeholder="搜索问题或话题..." class="pl-4 pr-12 py-2 border border-gray-300 rounded-l-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64">
                    <button class="search-btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-full text-sm font-medium transition-colors">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                
                <button id="askQuestionBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full text-sm font-medium transition-colors" onclick="navigateTo('ask-question')">
                    <i class="fas fa-plus mr-1"></i> 提问
                </button>
                
                <div class="relative">
                    <button class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 hover:bg-gray-300 transition-colors" onclick="navigateTo('notifications')">
                        <i class="fas fa-bell"></i>
                    </button>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
                </div>
                
                <div class="relative">
                    <button class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 hover:bg-blue-200 transition-colors" onclick="navigateTo('profile')">
                        <i class="fas fa-user"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content - Pages Container -->
    <main class="container mx-auto px-4 py-6">
        <!-- Home Page -->
        <div id="home-page" class="page active-page">
            <div class="flex flex-col lg:flex-row gap-6">
                <!-- Main Content Area -->
                <div class="flex-1">
                    <!-- Tab Navigation -->
                    <div class="flex border-b border-gray-200 mb-6">
                        <button class="tab-button mr-6 text-gray-600 hover:text-blue-600 font-medium active-tab" onclick="switchTab('recommend')">
                            推荐
                        </button>
                        <button class="tab-button mr-6 text-gray-600 hover:text-blue-600 font-medium" onclick="switchTab('follow')">
                            关注
                        </button>
                        <button class="tab-button text-gray-600 hover:text-blue-600 font-medium" onclick="switchTab('hot')">
                            热榜
                        </button>
                    </div>
                    
                    <!-- Question List -->
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-bold text-gray-800">最新问题</h2>
                            <div class="flex items-center space-x-2">
                                <div class="relative">
                                    <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                        <option>最新发布</option>
                                        <option>最多回答</option>
                                        <option>热门问题</option>
                                        <option>待回答</option>
                                    </select>
                                    <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 text-xs"></i>
                                </div>
                            </div>
                        </div>

                        <!-- Question Cards -->
                        <div class="space-y-4">
                            <!-- Question 1 -->
                            <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow cursor-pointer" onclick="navigateTo('question-detail', '如何理解React中的虚拟DOM机制')">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center space-x-2 mb-2">
                                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                                                <i class="fas fa-user text-sm"></i>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium">张提问者</p>
                                                <p class="text-xs text-gray-500">发布于 2小时前 · 浏览 156</p>
                                            </div>
                                        </div>
                                        <h3 class="text-lg font-semibold text-gray-800 mb-2 hover:text-blue-600">如何理解React中的虚拟DOM机制？它的优势在哪里？</h3>
                                        <p class="text-sm text-gray-600 mb-3 line-clamp-2">最近在学习React框架，对虚拟DOM的概念有些困惑。我知道它是React的核心特性之一，但不太理解它的具体工作原理和实际优势...</p>
                                        <div class="flex flex-wrap gap-2 mb-3">
                                            <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="event.stopPropagation(); navigateTo('topic-detail', '前端开发')">前端开发</span>
                                            <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="event.stopPropagation(); navigateTo('topic-detail', 'React')">React</span>
                                            <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="event.stopPropagation(); navigateTo('topic-detail', 'JavaScript')">JavaScript</span>
                                        </div>
                                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                                            <div class="flex items-center space-x-4">
                                                <div class="flex items-center space-x-1 text-gray-600">
                                                    <button class="vote-btn p-1 rounded-full hover:bg-gray-100">
                                                        <i class="fas fa-arrow-up"></i>
                                                    </button>
                                                    <span class="text-sm font-medium">24</span>
                                                    <button class="vote-btn p-1 rounded-full hover:bg-gray-100">
                                                        <i class="fas fa-arrow-down"></i>
                                                    </button>
                                                </div>
                                                <div class="text-gray-600 text-sm font-medium flex items-center space-x-1">
                                                    <i class="far fa-comment"></i>
                                                    <span>8条回答</span>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-3">
                                                <button class="text-gray-600 hover:text-yellow-500 text-sm font-medium flex items-center space-x-1" onclick="event.stopPropagation(); toggleBookmark(this)">
                                                    <i class="far fa-bookmark"></i>
                                                    <span>收藏</span>
                                                </button>
                                                <button class="text-gray-600 hover:text-red-500 text-sm font-medium flex items-center space-x-1" onclick="event.stopPropagation(); toggleLike(this)">
                                                    <i class="far fa-heart"></i>
                                                    <span>喜欢</span>
                                                </button>
                                                <button class="text-gray-600 hover:text-blue-600 text-sm font-medium">
                                                    <i class="fas fa-share-alt mr-1"></i>分享
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Question 2 -->
                            <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow cursor-pointer" onclick="navigateTo('question-detail', '在微服务架构中如何设计高效的分布式事务处理方案')">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center space-x-2 mb-2">
                                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                                                <i class="fas fa-user text-sm"></i>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium">李开发者</p>
                                                <p class="text-xs text-gray-500">发布于 5小时前 · 浏览 89</p>
                                            </div>
                                        </div>
                                        <h3 class="text-lg font-semibold text-gray-800 mb-2 hover:text-blue-600">在微服务架构中，如何设计高效的分布式事务处理方案？</h3>
                                        <p class="text-sm text-gray-600 mb-3 line-clamp-2">我们正在将单体应用迁移到微服务架构，遇到分布式事务一致性的问题。目前考虑使用Saga模式，但不确定是否是最佳方案...</p>
                                        <div class="flex flex-wrap gap-2 mb-3">
                                            <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="event.stopPropagation(); navigateTo('topic-detail', '微服务')">微服务</span>
                                            <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="event.stopPropagation(); navigateTo('topic-detail', '分布式系统')">分布式系统</span>
                                            <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="event.stopPropagation(); navigateTo('topic-detail', '架构设计')">架构设计</span>
                                        </div>
                                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                                            <div class="flex items-center space-x-4">
                                                <div class="flex items-center space-x-1 text-gray-600">
                                                    <button class="vote-btn p-1 rounded-full hover:bg-gray-100">
                                                        <i class="fas fa-arrow-up"></i>
                                                    </button>
                                                    <span class="text-sm font-medium">15</span>
                                                    <button class="vote-btn p-1 rounded-full hover:bg-gray-100">
                                                        <i class="fas fa-arrow-down"></i>
                                                    </button>
                                                </div>
                                                <div class="text-gray-600 text-sm font-medium flex items-center space-x-1">
                                                    <i class="far fa-comment"></i>
                                                    <span>5条回答</span>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-3">
                                                <button class="text-gray-600 hover:text-yellow-500 text-sm font-medium flex items-center space-x-1" onclick="event.stopPropagation(); toggleBookmark(this)">
                                                    <i class="far fa-bookmark"></i>
                                                    <span>收藏</span>
                                                </button>
                                                <button class="text-gray-600 hover:text-red-500 text-sm font-medium flex items-center space-x-1" onclick="event.stopPropagation(); toggleLike(this)">
                                                    <i class="far fa-heart"></i>
                                                    <span>喜欢</span>
                                                </button>
                                                <button class="text-gray-600 hover:text-blue-600 text-sm font-medium">
                                                    <i class="fas fa-share-alt mr-1"></i>分享
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Question 3 -->
                            <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow cursor-pointer" onclick="navigateTo('question-detail', '如何评估机器学习模型的性能')">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center space-x-2 mb-2">
                                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                                                <i class="fas fa-user text-sm"></i>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium">王数据科学家</p>
                                                <p class="text-xs text-gray-500">发布于 1天前 · 浏览 342</p>
                                            </div>
                                        </div>
                                        <h3 class="text-lg font-semibold text-gray-800 mb-2 hover:text-blue-600">如何评估机器学习模型的性能？有哪些常用指标？</h3>
                                        <p class="text-sm text-gray-600 mb-3 line-clamp-2">在完成模型训练后，我需要全面评估模型性能。除了常见的准确率、精确率和召回率外，还有哪些指标值得关注？不同场景下应该如何选择评估指标...</p>
                                        <div class="flex flex-wrap gap-2 mb-3">
                                            <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="event.stopPropagation(); navigateTo('topic-detail', '机器学习')">机器学习</span>
                                            <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="event.stopPropagation(); navigateTo('topic-detail', '数据科学')">数据科学</span>
                                            <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="event.stopPropagation(); navigateTo('topic-detail', '模型评估')">模型评估</span>
                                        </div>
                                        <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                                            <div class="flex items-center space-x-4">
                                                <div class="flex items-center space-x-1 text-gray-600">
                                                    <button class="vote-btn p-1 rounded-full hover:bg-gray-100">
                                                        <i class="fas fa-arrow-up"></i>
                                                    </button>
                                                    <span class="text-sm font-medium">37</span>
                                                    <button class="vote-btn p-1 rounded-full hover:bg-gray-100">
                                                        <i class="fas fa-arrow-down"></i>
                                                    </button>
                                                </div>
                                                <div class="text-gray-600 text-sm font-medium flex items-center space-x-1">
                                                    <i class="far fa-comment"></i>
                                                    <span>12条回答</span>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-3">
                                                <button class="text-gray-600 hover:text-yellow-500 text-sm font-medium flex items-center space-x-1" onclick="event.stopPropagation(); toggleBookmark(this)">
                                                    <i class="far fa-bookmark"></i>
                                                    <span>收藏</span>
                                                </button>
                                                <button class="text-gray-600 hover:text-red-500 text-sm font-medium flex items-center space-x-1" onclick="event.stopPropagation(); toggleLike(this)">
                                                    <i class="far fa-heart"></i>
                                                    <span>喜欢</span>
                                                </button>
                                                <button class="text-gray-600 hover:text-blue-600 text-sm font-medium">
                                                    <i class="fas fa-share-alt mr-1"></i>分享
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-6 flex justify-center">
                            <button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-50">
                                加载更多问题
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Right Sidebar -->
                <aside class="hidden lg:block w-80 flex-shrink-0">
                    <!-- Creative Center -->
                    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                        <h2 class="font-semibold text-gray-800 mb-4">创作中心</h2>
                        <div class="space-y-4">
                            <div class="creative-card p-4 rounded-lg cursor-pointer" onclick="navigateTo('ask-question')">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                                        <i class="fas fa-question"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium text-gray-800">提问</h3>
                                        <p class="text-sm text-gray-500">分享你的问题，获得专业解答</p>
                                    </div>
                                </div>
                            </div>
                            <div class="creative-card p-4 rounded-lg cursor-pointer" onclick="navigateTo('write-article')">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                                        <i class="fas fa-pen"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium text-gray-800">写文章</h3>
                                        <p class="text-sm text-gray-500">分享你的知识和见解</p>
                                    </div>
                                </div>
                            </div>
                            <div class="creative-card p-4 rounded-lg cursor-pointer" onclick="navigateTo('create-poll')">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                                        <i class="fas fa-poll"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium text-gray-800">发起投票</h3>
                                        <p class="text-sm text-gray-500">收集社区意见和反馈</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Recommended Follows -->
                    <div class="bg-white rounded-lg shadow-sm p-4 sticky top-20">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="font-semibold text-gray-800">推荐关注</h2>
                            <a href="#" class="text-sm text-blue-600 hover:text-blue-800" onclick="navigateTo('more-follows')">更多</a>
                        </div>
                        
                        <div class="space-y-4">
                            <!-- Follow Item 1 -->
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 cursor-pointer" onclick="navigateTo('profile', '张教授')">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-sm font-medium cursor-pointer hover:text-blue-600" onclick="navigateTo('profile', '张教授')">张教授</h3>
                                        <p class="text-xs text-gray-500">AI研究员 · 3.2k粉丝</p>
                                    </div>
                                </div>
                                <button class="follow-btn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-xs font-medium">
                                    关注
                                </button>
                            </div>
                            
                            <!-- Follow Item 2 -->
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 cursor-pointer" onclick="navigateTo('profile', '李工程师')">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-sm font-medium cursor-pointer hover:text-blue-600" onclick="navigateTo('profile', '李工程师')">李工程师</h3>
                                        <p class="text-xs text-gray-500">前端架构师 · 1.8k粉丝</p>
                                    </div>
                                </div>
                                <button class="follow-btn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-xs font-medium">
                                    关注
                                </button>
                            </div>
                            
                            <!-- Follow Item 3 -->
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 cursor-pointer" onclick="navigateTo('profile', '王博士')">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-sm font-medium cursor-pointer hover:text-blue-600" onclick="navigateTo('profile', '王博士')">王博士</h3>
                                        <p class="text-xs text-gray-500">数据科学家 · 2.5k粉丝</p>
                                    </div>
                                </div>
                                <button class="follow-btn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-xs font-medium">
                                    关注
                                </button>
                            </div>
                            
                            <!-- Follow Item 4 -->
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 cursor-pointer" onclick="navigateTo('profile', '赵设计师')">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-sm font-medium cursor-pointer hover:text-blue-600" onclick="navigateTo('profile', '赵设计师')">赵设计师</h3>
                                        <p class="text-xs text-gray-500">UI/UX设计师 · 1.2k粉丝</p>
                                    </div>
                                </div>
                                <button class="follow-btn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-xs font-medium">
                                    关注
                                </button>
                            </div>
                            
                            <!-- Follow Item 5 -->
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 cursor-pointer" onclick="navigateTo('profile', '刘架构师')">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-sm font-medium cursor-pointer hover:text-blue-600" onclick="navigateTo('profile', '刘架构师')">刘架构师</h3>
                                        <p class="text-xs text-gray-500">系统架构师 · 3.5k粉丝</p>
                                    </div>
                                </div>
                                <button class="follow-btn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-xs font-medium">
                                    关注
                                </button>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>
        </div>

        <!-- Question Detail Page -->
        <div id="question-detail-page" class="page">
            <div class="flex flex-col lg:flex-row gap-6">
                <!-- Main Content Area -->
                <div class="flex-1">
                    <!-- Back Button -->
                    <button onclick="navigateTo('home')" class="mb-4 flex items-center text-blue-600 hover:text-blue-800">
                        <i class="fas fa-arrow-left mr-2"></i> 返回问题列表
                    </button>
                    
                    <!-- Question Detail -->
                    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <div class="flex items-center space-x-2 mb-2">
                                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 cursor-pointer" onclick="navigateTo('profile', '张提问者')">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium cursor-pointer hover:text-blue-600" onclick="navigateTo('profile', '张提问者')">张提问者</p>
                                        <p class="text-xs text-gray-500">发布于 2小时前 · 浏览 156</p>
                                    </div>
                                </div>
                                <h1 id="question-title" class="text-2xl font-bold text-gray-800 mb-4">如何理解React中的虚拟DOM机制？它的优势在哪里？</h1>
                                
                                <div class="prose max-w-none text-gray-700 mb-6">
                                    <p>最近在学习React框架，对虚拟DOM的概念有些困惑。我知道它是React的核心特性之一，但不太理解它的具体工作原理和实际优势。</p>
                                    <p>我的理解是虚拟DOM是一个轻量级的JavaScript对象，它是对真实DOM的抽象表示。React在组件状态变化时，会先在虚拟DOM上进行操作，然后通过diff算法计算出最小的更新操作，最后批量更新到真实DOM上。</p>
                                    <p>但我不太明白：</p>
                                    <ol>
                                        <li>虚拟DOM具体是如何提高性能的？</li>
                                        <li>与直接操作DOM相比，虚拟DOM的优势在哪里？</li>
                                        <li>在什么情况下虚拟DOM的性能优势最明显？</li>
                                    </ol>
                                    <p>希望有经验的开发者能详细解释一下，最好能结合具体的例子说明。谢谢！</p>
                                </div>
                                
                                <div class="flex flex-wrap gap-2 mb-6">
                                    <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="navigateTo('topic-detail', '前端开发')">前端开发</span>
                                    <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="navigateTo('topic-detail', 'React')">React</span>
                                    <span class="tag bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs cursor-pointer" onclick="navigateTo('topic-detail', 'JavaScript')">JavaScript</span>
                                </div>
                                
                                <div class="flex items-center justify-between pt-4 border-t border-gray-100">
                                    <div class="flex items-center space-x-4">
                                        <div class="flex items-center space-x-1 text-gray-600">
                                            <button class="vote-btn p-1 rounded-full hover:bg-gray-100">
                                                <i class="fas fa-arrow-up"></i>
                                            </button>
                                            <span class="text-sm font-medium">24</span>
                                            <button class="vote-btn p-1 rounded-full hover:bg-gray-100">
                                                <i class="fas fa-arrow-down"></i>
                                            </button>
                                        </div>
                                        <button class="text-gray-600 hover:text-blue-600 text-sm font-medium flex items-center space-x-1">
                                            <i class="far fa-comment"></i>
                                            <span>8条回答</span>
                                        </button>
                                        <button class="text-gray-600 hover:text-yellow-500 text-sm font-medium flex items-center space-x-1" onclick="toggleBookmark(this)">
                                            <i class="far fa-bookmark"></i>
                                            <span>收藏</span>
                                        </button>
                                        <button class="text-gray-600 hover:text-red-500 text-sm font-medium flex items-center space-x-1" onclick="toggleLike(this)">
                                            <i class="far fa-heart"></i>
                                            <span>喜欢</span>
                                        </button>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <button class="text-gray-600 hover:text-blue-600 text-sm font-medium">
                                            <i class="fas fa-share-alt mr-1"></i>分享
                                        </button>
                                        <button class="text-gray-600 hover:text-blue-600 text-sm font-medium">
                                            <i class="fas fa-ellipsis-h"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Answers Section -->
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-bold text-gray-800">8条回答</h2>
                            <div class="flex items-center space-x-2">
                                <div class="relative">
                                    <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                        <option>按时间排序</option>
                                        <option>按赞同数排序</option>
                                        <option>仅显示专家回答</option>
                                    </select>
                                    <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 text-xs"></i>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Best Answer -->
                        <div class="bg-white rounded-lg shadow-sm p-6 mb-4 answer-card best-answer">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center justify-between mb-3">
                                        <div class="flex items-center space-x-2">
                                            <div class="relative">
                                                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 cursor-pointer" onclick="navigateTo('profile', '李工程师')">
                                                    <i class="fas fa-user"></i>
                                                </div>
                                                <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-yellow-500 rounded-full flex items-center justify-center">
                                                    <i class="fas fa-star text-white text-2xs"></i>
                                                </div>
                                            </div>
                                            <div>
                                                <p class="text-sm font-medium cursor-pointer hover:text-blue-600" onclick="navigateTo('profile', '李工程师')">李工程师</p>
                                                <p class="text-xs text-gray-500">前端架构师 · 5年经验</p>
                                            </div>
                                        </div>
                                        <div class="flex items-center space-x-2">
                                            <span class="badge verified-badge">已验证</span>
                                            <span class="badge expert-badge">专家</span>
                                        </div>
                                    </div>
                                    
                                    <div class="prose max-w-none text-gray-700 mb-4">
                                        <p>虚拟DOM(Virtual DOM)是React的核心
</html>